<template>
    <a-modal :width="700" :visible="visible" :title="recordInfo.input_name_cus" @cancel="handleClose" centered :footer="null">
        <a-table v-if="recordInfo.input_type=='json'" :row-key="record => record.field_name" :columns="tableColumns" :data-source="recordInfo.json_fields" :pagination="false">
            <template #is_required={record}>
                {{ record.is_required == 1?'必填':'非必填' }}
            </template>
        </a-table>
		<div class="title" v-if="recordInfo.input_type=='select' || recordInfo.input_type=='multi_select'">可选项：</div>
        <div class="select_con" v-if="recordInfo.input_type=='select' || recordInfo.input_type=='multi_select'">
            <div class="select_item" v-for="(item, index) in recordInfo.default_field_value" :key="index">
                {{ item.value }}
            </div>
        </div>
    </a-modal>
</template>
<script>
import { defineComponent, reactive, toRefs } from 'vue';
const tableColumns = [
    {
        title: '字段名称',
        dataIndex: 'field_name',
        key: 'field_name',
        slots: {
            customRender: 'field_name',
        },
    },
    {
        title: '原始名称',
        dataIndex: 'input_name',
        key: 'input_name',
        slots: {
            customRender: 'input_name',
        },
    },
    {
        title: '输入框类型',
        dataIndex: 'input_type',
        key: 'input_type',
        slots: {
            customRender: 'input_type',
        },
    },
    {
        title: '是否必填',
        dataIndex: 'is_required',
        key: 'is_required',
        slots: {
            customRender: 'is_required',
        },
    }
];
export default defineComponent({
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        recordInfo: {
            type: Object,
            default: ()=>{return {}}
        }
    },

    setup(props, context) {
        const handleClose = () => {
            context.emit('close')
        }
        return {
            tableColumns,
            handleClose
        }
    }
})
</script>

<style scoped lang="less">
	.title{
		font-weight: bold;
	}
    .select_con{
        display: flex;
        flex-wrap: wrap;
		margin-top: 10px;
        .select_item{
            &::after{
                content: '，';
            }
            &:nth-last-child(1){
                &::after{
                    content: '';
                }
            }
        }
    }
</style>